function updateLightEffect() {
    const lightPosition = (rotation.y / 360) * 100; // 计算光亮位置
    card.style.boxShadow = `
		        0 15px 45px rgba(0,0,0,0.3),
		        ${lightPosition}% 0 15px 30px rgba(255,255,255,0.5)
		    `;
}


const card = document.getElementById('card');
let isDragging = false;
let startX = 0, startY = 0;

// 旋转状态对象
const rotation = {
    x: 0,      // 当前X轴角度
    y: 0,      // 当前Y轴角度
    targetX: 0, // 目标X轴角度
    targetY: 0, // 目标Y轴角度
    vx: 0,     // X轴速度
    vy: 0,     // Y轴速度
    lastTime: 0
};

// 物理参数
const params = {
    sensitivity: 0.3,    // 旋转灵敏度
    friction: 0.85,      // 惯性摩擦
    bounceStiffness: 0.2, // 回弹刚度
    maxTilt: 30           // 最大倾斜角度
};

// 鼠标/触摸事件处理
function handleStart(clientX, clientY) {
    isDragging = true;
    startX = clientX;
    startY = clientY;
    rotation.lastTime = Date.now();
    cancelAnimationFrame(animationFrame);
}

function handleMove(clientX, clientY) {
    if (!isDragging) return;

    const now = Date.now();
    const deltaTime = now - rotation.lastTime;

    // 计算移动增量
    const deltaX = clientX - startX;
    const deltaY = clientY - startY;

    // 更新速度
    if (deltaTime > 0) {
        rotation.vx = (deltaY * params.sensitivity) / deltaTime * 15;
        rotation.vy = (deltaX * params.sensitivity) / deltaTime * 15;
    }

    // 更新目标角度
    rotation.targetY += deltaX * params.sensitivity;
    rotation.targetX = Math.min(Math.max(
        rotation.targetX + deltaY * params.sensitivity * 0.5,
        -params.maxTilt
    ), params.maxTilt);

    startX = clientX;
    startY = clientY;
    rotation.lastTime = now;
    updateRotation();
}

function handleEnd() {
    if (!isDragging) return;
    isDragging = false;
    startInertia();
}

// 更新旋转角度
function updateRotation() {
    rotation.y = rotation.targetY % 360;
    rotation.x = rotation.targetX;
    applyTransform();
    updateLightEffect(); // 添加这行代码
}

// 应用变换
function applyTransform() {
    card.style.transform = `
                rotateX(${rotation.x}deg)
                rotateY(${rotation.y}deg)
            `;
}

// 惯性动画
function startInertia() {
    const animate = () => {
        if (isDragging) return;

        // Y轴惯性
        rotation.vy *= params.friction;
        rotation.targetY += rotation.vy;

        // X轴回弹
        if (Math.abs(rotation.targetX) > 0.1) {
            rotation.targetX += (-rotation.targetX) * params.bounceStiffness;
        } else {
            rotation.targetX = 0;
        }

        updateRotation();

        if (Math.abs(rotation.vy) > 0.1 || Math.abs(rotation.targetX) > 0.1) {
            animationFrame = requestAnimationFrame(animate);
        }
    };
    animate();
}

// 事件监听
let animationFrame;
cardContainer.addEventListener('mousedown', e => handleStart(e.clientX, e.clientY));
document.addEventListener('mousemove', e => handleMove(e.clientX, e.clientY));
document.addEventListener('mouseup', handleEnd);

// 触摸设备支持
if ('ontouchstart' in window) {
    cardContainer.addEventListener('touchstart', e => {
        handleStart(e.touches[0].clientX, e.touches[0].clientY);
    });
    document.addEventListener('touchmove', e => {
        handleMove(e.touches[0].clientX, e.touches[0].clientY);
    });
    document.addEventListener('touchend', handleEnd);
}

const particles = document.getElementById('particles');

function createParticle() {
    const particle = document.createElement('div');
    particle.classList.add('particle');
    particle.style.width = `${Math.random() * 5 + 2}px`;
    particle.style.height = particle.style.width;
    particle.style.top = `${Math.random() * 100}%`;
    particle.style.left = `${Math.random() * 100}%`;
    particles.appendChild(particle);

    // 粒子动画
    particle.animate([
        { transform: 'translate(-50%, -50%) scale(0)', opacity: 0 },
        { transform: 'translate(-50%, -50%) scale(1)', opacity: 1 },
        { transform: 'translate(-50%, -50%) scale(0)', opacity: 0 }
    ], {
        duration: (Math.random() * 3000) + 2000,
        easing: 'ease-in-out',
        iterations: Infinity,
        delay: -(Math.random() * 5000)
    });

    // 移除粒子以避免DOM过载
    setTimeout(() => {
        particle.remove();
    }, 5000);
}

// 创建粒子
// setInterval(createParticle, 100);

$(function() {
    var cardid = $("#cardid").val();
    var fimg = $("#fimg").val();
    var bimg = $("#bimg").val();
    var hwbl = $("#hwbl").val();

    $("#front").css("background-image", "url('" + fimg + "')");
    $("#back").css("background-image", "url('" + bimg + "')");

    var width = $("#card").width();
    var height = width * hwbl;
    $("#card").css("height", height + "px");

})

